<template>
  <nav class="navigation">
    <ul class="nav-list">
      <li v-for="route in routes" :key="route.name">
        <router-link 
          :to="route.path" 
          :class="{ 'active': $route.name === route.name }"
        >
          {{ route.meta.title }}
        </router-link>
      </li>
    </ul>
  </nav>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 导航路由数据（与路由配置保持一致）
const routes = [
  { path: '/department', name: 'Department', meta: { title: '部门管理' } },
  { path: '/title', name: 'Title', meta: { title: '职称管理' } },
  { path: '/position', name: 'Position', meta: { title: '职务管理' } },
  { path: '/teacher', name: 'Teacher', meta: { title: '教职工列表' } },
  { path: '/reward', name: 'Reward', meta: { title: '奖惩信息管理' } }
]
</script>

<style scoped>
.navigation {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e5e7eb;
}

.nav-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-list li {
  margin: 0;
}

.nav-list li a {
  display: block;
  padding: 1rem 1.5rem;
  text-decoration: none;
  color: #333;
  transition: background-color 0.2s, color 0.2s;
}

.nav-list li a:hover {
  background-color: #e9f2ff;
  color: #1a73e8;
}

.nav-list li a.active {
  background-color: #1a73e8;
  color: white;
  font-weight: 500;
}
</style>